<template>
	<view class="wrap">
		<u-navbar title="忘记登录密码" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="top"></view>
		<view class="content">
			<view class="title u-m-b-auto">忘记登录密码</view>

			<u--input class="un" v-model="mobile" type="number" placeholder="请输入手机号" border="bottom" maxlength="11"
				clearable>
			</u--input>

			<u--input class="pwd" v-model="newPassword" type="password" placeholder="请输入新密码" border="bottom"
				maxlength="18" clearable></u--input>
			<u--input class="pwd" v-model="newPasswordCheck" type="password" placeholder="请再次输入新密码" border="bottom"
				maxlength="18" clearable></u--input>

			<u-form-item label-width="150" class="code-form">
				<u-input placeholder="请输入验证码" border="bottom" v-model="code" type="number" maxlength="6"></u-input>
				<u-button slot="right" type="defult" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
		</view>

		<view>
			<u-button text="重 置" @tap="submit" :customStyle="loginBtnStyle" />
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				mobile: '',
				code: '',
				newPassword: '',
				newPasswordCheck: '',
				codeTips: '获取验证码',
				codeTime: 60,
				codeInter: 0,
				isPrimary: false,
				loginBtnStyle: {
					width: '636rpx',
					height: '88rpx',
					borderRadius: '120rpx',
					background: '#6072FF',
					color: '#fff',
				},
			}
		},
		methods: {
			submit() {
				if (this.mobile.length<11) {
					this.$helpers.toast('请输入正确的电话号码');
					return;
				}
				if (this.newPassword.length < 6) {
					this.$helpers.toast('新密码长度不得少于6位');
					return;
				}
				if (this.newPassword != this.newPasswordCheck) {
					this.$helpers.toast('两次输入的密码不一样');
					return;
				}
				const params = {
					mobile: this.mobile,
					newPassword: this.newPassword,
					smsCode: this.code,
				}
				if (this.mobile && this.newPassword && this.newPasswordCheck && this.code) {
					uni.showLoading({
						mask: true,
						title: '重置中...'
					})
					this.$api('user.forgetLogin', params).then(res => {
						uni.hideLoading();
						if (res.status == 0) {
							this.$helpers.toast("重置成功", 'success', 2000, true, () => {
								uni.reLaunch({
									url: '/pages-other/login/login'
								})
							})
						} else {
							this.$helpers.toast('重置失败：' + res.msg);
						}
					})
				}
			},
			rightClick() {
				uni.redirectTo({
					url: "/pages-other/login/login"
				})
			},
			// 获取验证码
			getCode() {
				if (this.mobile.length<11) {
					this.$helpers.toast('请输入正确的电话号码');
					return;
				}
				if (this.newPassword.length < 6) {
					this.$helpers.toast('新密码长度不得少于6位');
					return;
				}
				if (this.newPassword != this.newPasswordCheck) {
					this.$helpers.toast('两次输入的密码不一样');
					return;
				}
				if (this.codeTime != 60) {
					return;
				}
				let param = {
					mobile: this.mobile
				}
				this.$api('user.getResetLoginSmsCode', param).then(res => {
					if (res.status == 0) {
						clearInterval(this.codeInter);
						this.codeTime = 60;
						this.codeInter = setInterval(() => {
							this.codeTime = this.codeTime - 1;
							if (this.codeTime == 0) {
								this.codeTime = 60;
								this.codeTips = '重新获取';
								clearInterval(this.codeInter);
							} else {
								this.codeTips = this.codeTime + 's后重新获取'
							}
						}, 1000);
						uni.showToast({
							title: '验证码已发送'
						})
					} else {
						this.$helpers.toast('短信发送失败：' + res.msg);
						if (res.msg.indexOf('验证码发送频繁') >= 0) {
							let msg = res.msg;
							msg = msg.substring(msg.lastIndexOf('！') + 2, msg.length)
							let time;
							if (msg.length == 6) {
								time = msg.substring(0, 2);
							} else {
								time = msg.substring(0, 1);
							}
							clearInterval(this.codeInter);
							this.codeTime = time;
							this.codeInter = setInterval(() => {
								this.codeTime = this.codeTime - 1;
								if (this.codeTime == 0) {
									this.codeTime = 60;
									this.codeTips = '重新获取';
									clearInterval(this.codeInter);
								} else {
									this.codeTips = this.codeTime + 's后重新获取'
								}
							}, 1000);
						}
					}
				})

			},
		}
	};
</script>


<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;
    background-color: #fff;
    height: 100vh;

		.content {
			/deep/ .uni-input-placeholder {
				color: grey !important;
			}

			width: 600rpx;
			margin: 0 auto;
			padding-top: 280rpx;

			.title {
				text-align: left;
				font-size: 46rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			/deep/ .u-input {
				margin-bottom: 40rpx;
			}

			.btn-primary {
				background-color: $u-primary;
				color: #fff;

			}

			/deep/ .u-button {
				margin-bottom: 40rpx;
			}

			.btn-disabled {
				background-color: #a0cfff;
				color: #fff;
			}

			.u-form-item {
				height: 60rpx !important;
			}
		}

		.tool {
			width: 600rpx;
			margin: 0 auto;
			margin-top: 42rpx;
			color: rgba(0, 0, 0, 0.7);
		}
	}
</style>
